<template>
	<view class="container">
		<view class="chat-list">
			<!-- AI助手常见问题气泡 -->
			<view class="message ai-message">
				<image class="avatar" src="/static/img/rect/加盟.png" mode="aspectFill" />
				<view class="content">
					<view class="faq-bubble-title">常见问题</view>
					<view class="faq-bubble-list">
						<view v-for="(q, idx) in quickFaqs" :key="idx" class="faq-bubble-btn" @click="showFaqDialog(q)">{{ q }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 问题弹窗 -->
		<view v-if="faqDialogVisible" class="faq-dialog-mask">
			<view class="faq-dialog">
				<view class="faq-dialog-q">{{ faqDialogQuestion }}</view>
				<view class="faq-dialog-a">{{ faqDialogAnswer }}</view>
				<button class="faq-dialog-btn" @click="faqDialogVisible = false">我了解了</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			quickFaqs: ['加盟需要什么条件？', '加盟费用是多少？', '总部提供哪些支持？', '加盟流程是怎样的？', '利润和回报周期？', '有区域保护政策吗？'],
			faqDialogVisible: false,
			faqDialogQuestion: '',
			faqDialogAnswer: ''
		};
	},
	methods: {
		showFaqDialog(q) {
			this.faqDialogQuestion = q;
			this.faqDialogAnswer = this.getAIResponse(q);
			this.faqDialogVisible = true;
		},
		getAIResponse(userMessage) {
			const lowerMessage = userMessage.toLowerCase();
			if (lowerMessage.includes('加盟') && lowerMessage.includes('条件')) {
				return '加盟狐灵仙草需要满足以下条件：\n1. 认可品牌理念，热爱奶茶行业\n2. 具备一定的资金实力（总投资约15-25万）\n3. 有合适的经营场所\n4. 愿意接受总部培训和指导';
			} else if (lowerMessage.includes('费用') || lowerMessage.includes('投资')) {
				return '狐灵仙草加盟费用明细：\n• 加盟费：3万元\n• 保证金：2万元（可退还）\n• 装修费：8-15万元\n• 设备费：5-8万元\n• 首批物料：2万元\n• 总投资：15-25万元';
			} else if (lowerMessage.includes('流程') || lowerMessage.includes('步骤')) {
				return '加盟流程如下：\n1. 提交申请 → 2. 资质审核 → 3. 签订合同 → 4. 选址装修 → 5. 培训开业\n整个流程约1-2个月完成，总部全程指导。';
			} else if (lowerMessage.includes('支持') || lowerMessage.includes('帮助')) {
				return '总部提供全方位支持：\n• 选址评估和装修指导\n• 专业培训（产品制作、运营管理）\n• 开业活动策划\n• 持续运营指导\n• 新品研发和推广';
			} else if (lowerMessage.includes('利润') || lowerMessage.includes('收益')) {
				return '根据市场调研，狐灵仙草门店月营业额通常在8-15万元，毛利率约65%，扣除各项成本后，月净利润约2-5万元，投资回收期约8-12个月。';
			} else if (lowerMessage.includes('区域') || lowerMessage.includes('保护')) {
				return '我们实行区域保护政策，每个区域只授权一家门店，确保加盟商利益。具体保护范围根据城市规模和商圈情况确定。';
			} else {
				return '感谢您的咨询！关于狐灵仙草加盟，您可以询问：\n• 加盟条件和要求\n• 投资费用明细\n• 加盟流程步骤\n• 总部支持政策\n• 收益预期分析\n• 区域保护政策\n\n我会为您详细解答！';
			}
		}
	}
};
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #f8f9fa;
	display: flex;
	flex-direction: column;
}

.chat-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 32rpx;
}
.message {
	display: flex;
	align-items: flex-start;
	gap: 16rpx;
	margin-bottom: 32rpx;
}
.ai-message .avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: #fff;
	border: 2rpx solid #de9190;
	object-fit: cover;
	flex-shrink: 0;
}
.content {
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	padding: 24rpx;
	min-width: 400rpx;
	max-width: 90vw;
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}
.faq-bubble-title {
	font-weight: bold;
	margin-bottom: 12rpx;
	color: #de9190;
}
.faq-bubble-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}
.faq-bubble-btn {
	background: #fff0f6;
	color: #de9190;
	border-radius: 32rpx;
	padding: 16rpx 32rpx;
	font-size: 28rpx;
	border: 1rpx solid #ffb6c1;
	cursor: pointer;
	transition: background 0.2s;
	text-align: left;
}
.faq-bubble-btn:active {
	background: #ffb6c1;
	color: #fff;
}

/* 弹窗样式 */
.faq-dialog-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.25);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.faq-dialog {
	background: #fff;
	border-radius: 32rpx;
	padding: 48rpx 32rpx 32rpx 32rpx;
	min-width: 500rpx;
	max-width: 90vw;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32rpx;
}
.faq-dialog-q {
	font-size: 30rpx;
	font-weight: bold;
	color: #de9190;
	margin-bottom: 8rpx;
	text-align: center;
}
.faq-dialog-a {
	font-size: 28rpx;
	color: #333;
	white-space: pre-line;
	text-align: left;
}
.faq-dialog-btn {
	margin-top: 16rpx;
	background: #de9190;
	color: #fff;
	border: none;
	border-radius: 32rpx;
	font-size: 28rpx;
	padding: 16rpx 48rpx;
	font-weight: bold;
}
</style>
